<%- include('nav') %>
  <div class="text-sm breadcrumbs">
    <ul>
      <li>
        <a href="/admin/home">首页</a>
      </li>
      <li>客户管理</li>
    </ul>
  </div>

  <div id="clients-app" style="min-width: 960px" class="col-12" data-theme="bumblebee">
    <table class="table col-12 table-zebra table-compact">
      <thead>
        <tr>
          <th>客户[邀请人]</th>
          <!-- <th class="col-8">群</th> -->
          <th>红包余额</th>
          <th>操作</th>
        </tr>
      </thead>
      <tr v-for="client in clients">
        <td>
          <div class="flex items-start" v-if="client.user">

            <div>
              <a target="_blank" v-bind:href="'/admin/manage?clientid='+client._id"
                class="pl1 badge badge-success badge-sm">{{client.user.nickname}}</a>
            </div>
          </div>
          <a target="_blank" v-else v-bind:href="'/admin/manage?clientid='+client._id"
            class="gray font-12 badge badge-success badge-sm">{{client.contactid}}</a>
        </td>
        <!-- <td class="col-8" style="white-space: normal">
        <div style="flex-wrap: wrap">
          <a
            target="_blank"
            v-bind:href="'/admin/manage?clientid='+client._id"
            v-for="room in client.rooms"
            class="m1 badge badge-sm"
            v-bind:class="{'badge-outline': room.vip == false}"
            >{{room.topic || room.id}}</a
          >
        </div>
      </td> -->
        <td>{{client.red_fee?client.red_fee/100:'0'}}元</td>
        <td>
          <div class="blue" @click="selectedClient=client">修改余额</div>
        </td>
      </tr>
    </table>

    <div v-if="clients.length==0" class="gray my2 center">
      <img src="/img/empty.png" style="width: 250px" class="mx-auto" />
      <div class="font-12 bold">没有更多数据了</div>
    </div>

    <div class="p1 font-12 gray center">到底了~</div>


    <div v-if="selectedClient">
      <div class="weui-mask" @click="selectedClient=false"></div>
      <div class="weui-half-screen-dialog">
        <!-- <i class="weui-icon-warn weui-icon_msg"></i> -->
        <div class="weui-half-screen-dialog__hd">
          <div class="weui-half-screen-dialog__hd__side">
            <button class="weui-icon-btn" @click="selectedClient=false">
              返回
              <i class="weui-icon-back-arrow-thin"></i>
            </button>
          </div>
          <div class="weui-half-screen-dialog__hd__main">修改余额</div>
        </div>

        <div class="weui-half-screen-dialog__bd">
          <div class="center m2">
            <input class="input input-bordered" v-model="selectedClient.balance" />
          </div>
          <button @click="saveBalance" class="btn btn-primary btn-small">保存</button>
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: "#clients-app",
        data: function () {
          return {
            clients: [],
            selectedClient: false,
          };
        },
        created: function () {
          this.fetchClients();
        },
        methods: {
          fetchClients: function () {
            var that = this;
            let loading = weui.loading();
            axios.get("/admin/bot/clients").then(function (res) {
              res.data.clients && res.data.clients.map(function (client) {
                client.balance = client.red_fee ? client.red_fee / 100 : 0;
              })
              that.clients = res.data.clients;
              loading.hide();

            });
          },

          saveBalance: function () {
            console.log(this.selectedClient);
            axios.post('/admin/client/' + this.selectedClient._id + '/redfee', this.selectedClient).then(function (res) {
              if (!res.data.status) {
                return weui.topTips(res.data.content);
              }
              weui.toast("修改成功")
              location.reload();
            }).catch(function () {
              weui.topTips('保存失败, 确保重启到最新版本')
            })
          }
        },
      });
    </script>